<template>
  <div>
    <a-modal
      :visible="visible"
      :title="'申请转账单'"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="applicationForTransferForm-modal-Lu"
      @cancel="visible = false">
      <div style="width: 60%;margin: 0 auto;">
        <a-button v-print="printObj" class="blue-btn">打印</a-button>
        <div id="printTest" v-if="visible" class="applicationForTransferForm-print-box">
          <h1 class="letterSpan">申请转账单</h1>
          <table border="1" cellspacing="0" class="applicationForTransferForm-table" :key="tableKey">
            <tr>
              <th>收款单位</th>
              <td>{{ 'xx睿惠农鲜供应链管理有限公司' }}</td>
              <th rowspan="3" style="padding: 0 !important;">付款<br/>方式</th>
              <td rowspan="3">{{ '转账' }}</td>
            </tr>
            <tr>
              <th>账&nbsp;&nbsp;号</th>
              <td>{{ '2102 1136 0930 0029 927' }}</td>
            </tr>
            <tr>
              <th>开户银行</th>
              <td>{{ '中国工商银行股份有限公司南宁市南棉支行' }}</td>
            </tr>
            <tr>
              <th>金&nbsp;&nbsp;额</th>
              <td>{{ '肆万伍仟陆百陆拾陆元整' }}</td>
              <td colspan="2" style="text-align: left;">{{ '￥45666.00' }}</td>
            </tr>
            <tr>
              <th>用&nbsp;&nbsp;途</th>
              <td colspan="3">{{ '审评中心在职人员2024年第一季度伙食补助费（47人）' }}</td>
            </tr>
          </table>
          <div class="applicationForTransferForm-print-title-box" style="padding: 10px 100px 0px 30px;">
            <span>中心领导：<span>{{ 'XXX' }}</span></span>
            <span>财务：<span>{{ 'XXX' }}</span></span>
            <span>部门：<span>{{ 'XXX' }}</span></span>
            <span>经办人：<span>{{ 'XXX' }}</span></span>
          </div>
        </div>
      </div>
      <template slot="footer">
        <div>
          <a-button @click="visible = false" class="blue-btn">关闭</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      tableKey: '',
      printObj:{
        id:"printTest", //需要打印的id名称
        popTitle:"申请转账单",//文档的名称
        // preview:true,//预览功能，不好用
        zIndex:'20002',
        beforeOpenCallback(vue){
            // //console.log('打印回调',vue)
        },
        openCallback (vue) {//打开之前
            // //console.log('打开之前',vue)
        },
        closeCallback (vue) {//关闭了打印工具
            // //console.log('关闭了打印工具')
        },
      },
    }
  },
}
</script>
<style lang="less">
.applicationForTransferForm-print-box {
  font-size: 18px;
  font-family: 宋体;
  color: black;
  h1 {
    text-align: center;
  }
  .applicationForTransferForm-table {
    width: 100%;
    text-align: center;
    // table-layout: fixed;
    th {
      padding: 10px 5px !important;
    }
    td {
      min-width: 10px;
      padding: 5px !important;
    }
  }
  table {}
  h1 {
    font-weight: bold;
    letter-spacing: 4px;
    // font-size: 35px;
  }
  .Title {
    color: #5ca3e5;
    // font-weight: bold;
    text-align: center;
  }
  .letterSpan {
    // letter-spacing: 8px;
  }
  .td-rowspan {
    width: 1px !important;
    min-width: 1px !important;
    padding: 1px 0;
  }
  .applicationForTransferForm-print-title-box {
    display: flex;
    justify-content: space-between;
  }
}
</style>

